<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width:60%;
            height: 400px;
            border: 1px solid #f00;
            margin:10px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h2>防抖</h2>
    <div class="box"> 1 </div>
</body>
<script>
    //获取box
    const box=document.querySelector('.box')

    let i=0;
    box.addEventListener('mousemove',debounce(moveFn,2000),false)
    

    function moveFn(e) {
       e.target.style.color='#f00'
       box.textContent=++i;
    }

    //写一个防抖函数，降低触发次数
    function debounce(fn,wait) {
        let timer=null
        return function() {
            //保存当前this
            const _this=this  
            //保存事件
           const args=arguments
            //清除定时器
            clearTimeout(timer)
            //启动定时器
            timer=setTimeout(function() {
                fn.apply(_this,args)  //call,apply,bind
            },wait)

        }
    }

</script>
</html>